{% extends "element/saas/base_mini.html" %}
{% load future wenlincms_tags wlcore_tags %}
{% block meta_title %}{% endblock %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{{ STATIC_URL }}{{ "element/saas/css/statistics.css"|file_time_stamp }}">
    {% block htmlcss %}{% endblock %}
{% endblock %}

{% block main %}
    <div class="admin-content statistics">
        {% block shaixuan %}
            <div style="float:left;width:225px;">
                <h4 class="report-title sta_title">当前筛选条件</h4>

                <div class="sta_selected" id="sta_regionselect">地区：
                    <div class="sta_selecttext">全部</div>
                    <a href="javascript:void(0)" class="sta_clearbtn"
                       onclick="cleartree('datagrid_region')">清除</a>
                </div>
                <div class="sta_selected" id="sta_nicselect">行业：
                    <div class="sta_selecttext">全部</div>
                    <a href="javascript:void(0)" class="sta_clearbtn"
                       onclick="cleartree('datagrid_nic')">清除</a>
                </div>
                {% block shaixuan_more_box %}{% endblock %}
                {% block region %}
                    <h4 class="report-title">地区筛选</h4>
                    <div id="gridPanel_region" class="mini-panel" title="header" iconCls="icon-add"
                         style="width:100%;height:400px;"
                         showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0;"
                         borderStyle="border:1px solid #e5e5e5">
                        <div id="datagrid_region" class="mini-treegrid" style="width:100%;height:100%;"
                             borderStyle="border:0" onnodeselect="tjselect('datagrid_region')"
                             showPageSize="false" showPageIndex="false" url="/saas/statistics_loadnode/?method=region"
                             showTreeIcon="true" idField="code" parentField="parent" treeColumn="diming">
                            <div property="columns">
                                <div name="diming" field="name" width="100"></div>
                            </div>
                        </div>
                    </div>
                {% endblock %}

                {% block nic %}
                    <h4 class="report-title">行业筛选</h4>
                    <div id="gridPanel_nic" class="mini-panel" title="header" iconCls="icon-add"
                         style="width:100%;height:400px;"
                         showToolbar="true" showCloseButton="true" showHeader="false" bodyStyle="padding:0;"
                         borderStyle="border:1px solid #e5e5e5">
                        <div id="datagrid_nic" class="mini-treegrid" style="width:100%;height:100%;"
                             borderStyle="border:0" onnodeselect="tjselect('datagrid_nic')"
                             showPageSize="false" showPageIndex="false" url="/saas/statistics_loadnode/?method=nic"
                             showTreeIcon="true" idField="code" parentField="parent" treeColumn="chanyelian">
                            <div property="columns">
                                <div name="chanyelian" field="name" width="150"></div>
                            </div>
                        </div>
                    </div>
                {% endblock %}
                {#更多筛选#}
                {% block shaixuan_more %}{% endblock %}
            </div>
        {% endblock %}

        {% block content %}
            <div style="width:100%;padding-left:250px;">
                <div id="mainTabs" class="mini-tabs" activeIndex="0" style="width:100%;"
                     arrowPosition="side" showNavMenu="true">
                    <div name="comcharts" title="产业地图和可视化" iconCls="icon-poll">
                        {% block allchart %}
                            <div id="chartloading">
                                <div class="spinner">
                                    <div class="spinner-container container1">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                    <div class="spinner-container container2">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                    <div class="spinner-container container3">
                                        <div class="circle1"></div>
                                        <div class="circle2"></div>
                                        <div class="circle3"></div>
                                        <div class="circle4"></div>
                                    </div>
                                </div>
                            </div>
                            <div id="sta_region" class="chartsdiv" style="width: 100%;height: 600px;"></div>
                            {% block chart %}
                                <div id="sta_region_bar" class="chartsdiv" style="width: 100%;height: 400px;"></div>
                                <div id="sta_industry_bar" class="chartsdiv" style="width: 100%;height: 400px;"></div>
                            {% endblock %}
                            {% block chart2 %}
                                <div>
                                    <div id="timtbox">
                                        <ul id="chartTimeLine"></ul>
                                    </div>
                                    <div class="btnsbox">
                                        <span class="sta_btns" id="prebtn" title="向前翻页" data-active="active"
                                              onclick="cpage(-1,this,this)"><i class="am-icon-chevron-left"></i></span>
                                        <span class="sta_btns" id="startbtn" title="自动播放" data-active="active"><i
                                                class="am-icon-play"></i></span>
                                        <span class="sta_btns" id="stopbtn" title="停止自动播放" style="display: none;"
                                              data-active="active"><i class="am-icon-pause"></i></span>
                                        <span class="sta_btns" id="nextbtn" title="向后翻页" data-active="inactive"
                                              onclick="cpage(1,this,this)"><i class="am-icon-chevron-right"></i></span>
                                    </div>
                                </div>
                                {% block sx %}{% endblock %}
                                <div id="sta_region_pie" class="chartsdiv smalldiv"
                                     style="width: 49%;display:inline-block;height: 400px;"></div>
                                <div id="sta_industry_pie" class="chartsdiv smalldiv"
                                     style="width: 49%;display:inline-block;height: 400px;"></div>
                                <div id="sta_entmonth" class="chartsdiv" style="width: 100%;height: 400px;"></div>
                            {% endblock %}
                        {% endblock %}
                    </div>
                    <div name="comtables" title="详细数据表" iconCls="icon-listview">
                        <h4 class="report-title" id="regiontabText">各地区分布</h4>
                        <table class="basictable" id="comRegionTable"></table>
                        <h4 class="report-title" id="nictabText">各行业分布</h4>
                        <table class="basictable" id="comIndustryTable"></table>
                        {% block table %}  {% endblock %}
                    </div>
                    {% block comlist %}
                        <div name="comlist" title="企业榜单" iconCls="icon-table"></div>
                    {% endblock %}
                </div>
            </div>
        {% endblock %}
    </div>
{% endblock %}

{% block footer_js %}
    <script src="{{ STATIC_URL }}opensource/echarts-3.3/echarts.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}opensource/echarts-3.3/region.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}opensource/echarts-3.3/dataTool.min.js" type="text/javascript"></script>
    <script src="{{ STATIC_URL }}opensource/highstock-5.0.2/highstock.js"></script>
    <script src="{{ STATIC_URL }}opensource/highcharts-5.0.0/highcharts-more.js"></script>
    <script src="{{ STATIC_URL }}{{ "element/saas/js/statistics.js"|file_time_stamp }}"></script>
    {% block htmljs %}{% endblock %}
    {{ block.super }}
{% endblock %}
